<template>
    <div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
</template>

<script setup>
import { ref, defineProps, onMounted, onBeforeUnmount  } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    width: { type: String, default: '100%' },
    height: { type: String, default: '100%' },
    option: { type: Object, default: () => ({}) }
})

const myChartsRef = ref(null)
let myChart = null
let timer = null
// 初始化echarts
const initChart = () => {
    if (myChart) {
        myChart.dispose()
    }
    myChart = echarts.init(myChartsRef.value)
    myChart.setOption(props.option, true)
}

// 重新渲染echarts
const resizeChart = () => {
    timer
}
</script>

<style lang="scss" scoped>

</style>
